<template>
  <!-- 主体 -->
  <div class="Box">
    <!-- 头部 顶部 -->
    <div class="Header_box">
      <div class="Header">
        <div class="Header_left">
          <img class="image1" src="../assets/henglogo.jpg" alt="">
        </div>
        <div class="Header_left_text">随心拍卖</div>
        <div class="Header_right">
          <p>
            <i class="el-icon-chat-line-square" style="color:#d7000f;font-weight: 600;"></i>
            <span class="sp1">"欢迎登录"</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="bodybox">
        <div class="bodycenter">
          <div class="leftbox">
            <img src="../assets/pclogintwo.png" alt="">
            <p style="margin-top: 10px;text-indent: 1em;font-size: 19px;">
              <span @click="Qrcode = true">随心拍卖App | 点击扫码下载</span>
            </p>
              <!-- 二维码弹窗 -->
              <el-dialog  width="440px" :visible.sync="Qrcode" :show-close="false" :show-header="false">
                <div class="Qrcode">
                  <!-- 二维码图片放在这里 -->
                </div>
            </el-dialog>
          </div>
            <!-- 登录框 -->
            <!-- <div class="loginbox"> -->
              <!-- 登录 -->

            <div class="denglu" v-if="showM=='denglu'">
                    <h2>手机号密码登录</h2>
              <!-- 前端登录表单 -->
              <el-form ref="loginFormRef" :model="loginForm" label-width="0px" :rules="loginRules">
                <!-- 用户名 -->
                <el-form-item prop="userPhone" class="inputa" style="margin-top:30px;">
                    <el-input prefix-icon="el-icon-phone" placeholder="请输入手机号"  @input="isPhone()" v-model="loginForm.userPhone" ></el-input>
                    <!-- <div class="errorColor" v-show="isShow">{{phoneMessage}}</div> -->
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="userPassword" class="inputa">
                    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginForm.userPassword" show-password></el-input>
                </el-form-item>
                <el-form-item prop="seccode" class="inputbar" >
                    <el-input class="log-input"   v-model="loginForm.seccode" placeholder="验证码"
                      prefix-icon="el-icon-warning-outline" @keydown.enter.native="login('loginForm')" >
                    </el-input>
                    <img id="imgVerify" :src="srcCode" alt="更换验证码" height="36" width="40%" @click="getCode();">
              </el-form-item>
              <p style="font-size: 8px;" ><span class="forgetPWD"  @click="showM='EmailLogin'">邮箱验证码登录</span></p>
                  <!-- <p style="text-align:right;font-size: 8px;" ><span class="forgetPWD"  @click= "ClickforgetPWD()">忘记密码？</span></p> -->
                  <!-- <el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox> -->
                  <p style="text-align:right;font-size: 8px;margin-top: 10px;" ><span class="forgetPWD"  @click="TCzhuce =true">我还未注册？</span></p>
                  <p style="text-align:right;font-size: 8px;margin-top: 10px;" ><span class="forgetPWD"  @click="WangJiPassWord =true">忘记密码？</span></p>
                  <el-row>
                      <el-col :span="25" style="width: 100%;margin-top:10px;">
                          <el-button type="primary" style="width: 100%;" @click="login(loginForm)" >登录</el-button>
                      </el-col>
                  </el-row>
              </el-form>
             </div>
<!-- 验证码登录 -->
 <div class="denglu" v-else-if="showM=='EmailLogin'">
            <h2>邮箱验证登录</h2>
      <!-- 前端登录表单 -->
      <el-form ref="loginFormRef" :model="loginForm" label-width="0px" :rules="loginRules">
        <!-- 用户名 -->
        <el-form-item prop="userEmail" class="inputa" style="margin-top:30px;">
          <el-input placeholder="请输入邮箱" v-model="loginForm.userEmail">
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code" class="inputa">
            <el-input style="width:60%" prefix-icon="el-icon-lock" placeholder="请输入验证码" v-model="loginForm.code"></el-input>
            <el-button  style="width:40%" @click="sendMail('1',loginForm.userEmail)"  id="sendbtn"  :disabled="disabled">
              {{message}}
            </el-button>
        </el-form-item>
      <p style="font-size: 8px;" ><span class="forgetPWD"  @click="showM='denglu'">手机号密码登录</span></p>
          <!-- <p style="text-align:right;font-size: 8px;" ><span class="forgetPWD"  @click="ClickforgetPWD()">忘记密码？</span></p> -->
          <p style="text-align:right;font-size: 8px;margin-top: 10px;" ><span class="forgetPWD"  @click="TCzhuce = true">我还未注册？</span></p>
          <el-row>
              <el-col :span="25" style="width: 100%;margin-top:10px;">
                  <el-button type="primary" style="width: 100%;" @click="codelogin(loginForm)" >登录</el-button>
              </el-col>
          </el-row>
      </el-form>
     </div>
<!-- 忘记密码找回 -->
<el-dialog  width="440px" :visible.sync="WangJiPassWord" :show-close="false" :show-header="false">
  <div  class="backpassword" >
    <h1>忘记密码找回</h1>
<!-- 忘记密码 -->
<el-form ref="loginFormRef" :model="WangJiPassWordDate" label-width="0px" style="margin-top: 10px;">
<el-form-item prop="userEmail" class="inputa">
  <span style="letter-spacing:28px">邮</span>箱：
  <el-input style="width:50%" prefix-icon="el-icon-message" placeholder="请输入邮箱" v-model="WangJiPassWordDate.userEmail"></el-input>
  <el-button :loading="loading"  style="width:25%;margin-left:5%;" @click="sendMail('1',WangJiPassWordDate.userEmail)" type="success" :disabled="disabled" >
    {{message}}
  </el-button>
</el-form-item>
<el-form-item prop="code" class="inputa" style="margin-top:30px;">
  <span style="letter-spacing:7px">验</span><span style="letter-spacing:7px">证</span>码：
    <el-input style="width:30%" prefix-icon="el-icon-warning-outline" v-model="WangJiPassWordDate.code" placeholder="请输入" ></el-input>
</el-form-item>
<el-form-item prop="userPassword" class="inputa" style="margin-top:30px;">
    修改密码：
    <el-popover
    placement="bottom"
    width="200"
    trigger="click"
    content="不可输入特殊符号！、@、#、￥空格等">
  <el-input slot="reference" style="width:80%"  prefix-icon="el-icon-lock"  v-model="WangJiPassWordDate.userPassword" placeholder="请输入密码" show-password></el-input>
    </el-popover>
</el-form-item>
<el-form-item prop="ConfirmPassword" class="inputa" style="margin-top:30px;">
确认密码：
<el-input  style="width:80%"  prefix-icon="el-icon-lock" v-model="ConfirmPassword" placeholder="与上面密码一直" show-password></el-input>
</el-form-item>
  <el-row>
      <el-col :span="25" style="width: 100%;margin-top:10px;">
          <el-button type="primary" style="width: 100%;" @click="backPassWord(WangJiPassWordDate)">确认修改</el-button>
      </el-col>
  </el-row>
</el-form>
</div>
</el-dialog>
<!-- 注册 -->
      <el-dialog  width="440px" :visible.sync="TCzhuce" :show-close="false" :show-header="false">
        <div  class="zhuce" >
          <h1>随心注册</h1>
      <div v-if="showZhuCeWanShan">
      <!-- 注册 -->
      <el-form ref="loginFormRef" :model="zhuceData" label-width="0px" :rules="loginRules">
      <!-- 用户名 -->
      <el-form-item prop="loginName" class="inputa" style="margin-top:30px;" :maxlength="10">
          <span style="letter-spacing:28px">昵</span>称：
            <el-popover
            placement="bottom"
            width="200"
            trigger="click"
            content="不可输入特殊符号！、@、#、￥空格等">
              <el-input slot="reference" style="width:80%" :maxlength="10" prefix-icon="el-icon-user"  v-model="zhuceData.loginName" placeholder="请输入用户名" @input="isname(zhuceData.loginName)"></el-input>
          </el-popover>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item prop="userPhone" class="inputa">
        <span style="letter-spacing:7px">手</span><span style="letter-spacing:7px">机</span>号：
          <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          content="输入十一位手机">
              <el-input slot="reference" style="width:80%" prefix-icon="el-icon-phone"  placeholder="请输入手机号" v-model="zhuceData.userPhone"
              ></el-input>
          </el-popover>
          <!-- <el-button  style="width:20%" @click="changeMsg"  :disabled="disabled" >
            {{message}}
          </el-button> -->
      </el-form-item>
      <el-form-item prop="userEmail" class="inputa">
        <span style="letter-spacing:28px">邮</span>箱：
        <el-input style="width:50%" prefix-icon="el-icon-message" placeholder="请输入邮箱" v-model="zhuceData.userEmail"></el-input>
        <el-button :loading="loading"  style="width:25%;margin-left:5%;" @click="sendMail('2',zhuceData.userEmail)" type="success" :disabled="disabled" >
          {{message}}
        </el-button>
      </el-form-item>
      <el-form-item prop="code" class="inputa" style="margin-top:30px;">
        <span style="letter-spacing:7px">验</span><span style="letter-spacing:7px">证</span>码：
          <el-input style="width:30%" prefix-icon="el-icon-warning-outline" v-model="zhuceData.code" placeholder="请输入" ></el-input>
      </el-form-item>
      <el-form-item prop="userPassword" class="inputa" style="margin-top:30px;">
          <span style="letter-spacing:28px">密</span>码：
          <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          content="不可输入特殊符号！、@、#、￥空格等">
        <el-input slot="reference" style="width:80%"  prefix-icon="el-icon-lock"  v-model="zhuceData.userPassword" placeholder="请输入密码" show-password></el-input>
          </el-popover>
      </el-form-item>
      <el-form-item prop="ConfirmPassword" class="inputa" style="margin-top:30px;">
      确认密码：
      <el-input  style="width:80%"  prefix-icon="el-icon-lock" v-model="ConfirmPassword" placeholder="与上面密码一直" show-password></el-input>
      </el-form-item>
      <!-- 类型 -->
      <el-form-item prop="userType" class="inputa" style="margin-top:30px;">
        <span style="letter-spacing:28px">类</span>型：
        <el-select v-model="zhuceData.userType" placeholder="请选择类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
        <p style="text-align:right;font-size: 8px;" ><span class="forgetPWD"  @click="TCzhuce =false">我经有账号，登录</span></p>
        <el-row>
            <el-col :span="25" style="width: 100%;margin-top:10px;">
                <el-button type="primary" style="width: 100%;" @click="next(zhuceData)">注册（完善信息）</el-button>
            </el-col>
        </el-row>
      </el-form>
      </div>
      </div>
      </el-dialog>

              <!-- 登录&复选框 按钮色号 #d7000f -->
            <!-- </div> -->
        </div>

    </div>
    <div class="end_box">
      <div class="endbox_one">
        <p class="endp1" style="margin-top: 26px;">
          <a href="">关于我们</a>
          <a href="">联系我们</a>
          <a href="">人才招聘</a>
          <a href="">广告服务</a>
          <a href="">友情链接</a>
        </p>
        <p class="endp1">
          <a>Copyright © 2023-2023 追云666.com版权所有</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loginPage',
  data () {
    const checkuserEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则;
    const checkuserPhone = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      loginRules: {
        userEmail: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur'
          },
          {
            validator: checkuserEmail,
            message: '请输入正确的邮箱地址',
            trigger: 'blur'
          }
        ],
        userPhone: [
          { required: true, message: '手机号码不能为空' },
          {
            validator: checkuserPhone,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      zhuceData: {
      },
      TCzhuce: false,
      // 二维码弹窗
      Qrcode: false,
      srcCode: '',
      WangJiPassWordDate: {},
      WangJiPassWord: false,
      sendMailButton: false, // 发送验证码
      checked: false,
      // 登陆表单数据绑定对象
      loginForm: { // 登录
        userPhone: '',
        userPassword: '',
        code: '',
        seccode: ''// 用户输入验证码数据
      },
      visible: false,
      checkCode: '', // 生成验证码
      showM: 'denglu',
      options: [{
        value: '1',
        label: '个人注册'
      }, {
        value: '0',
        label: '企业注册'
      }],
      showZhuCeWanShan: true,
      active: 1, // 注册步骤
      isShow: false, // 展示手机格式是否有误
      message: '发送验证码',
      disabled: false,
      time: 60,
      phoneMessage: '输入手机号有误',
      ConfirmPassword: '', // 确认密码
      codes: ''
    }
  },

  mounted () {
    sessionStorage.setItem('token', '')
    // this.srcCode = 'http://127.0.0.1:8088/login/getVerify'
    this.getCode()
    // this.aa()
    window.addEventListener('DOMContentLoaded', function () {
      const boxElement = document.querySelector('.denglu')
      boxElement.classList.add('slide-up')
    })
  },
  methods: {
    isname (name) {
      this.zhuceData.loginName = name.replace(/[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \\+ =<>?"{}|, \\/ ;' \\ [ \] ·~！@#￥%……&*（）—— \\+ ={}|《》？：“”【】、；‘’，。、_.-:]/g, '')
    },
    getCode () {
      this.$axios.get('/clientuser/code').then(res => {
        this.srcCode = res.data.imgCode
        this.loginForm.uuid = res.data.uuid
      })
    },

    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
    },
    // 注册
    next (data) {
      // window.sessionStorage.getItem('token', 'aa')
      if (data.userName === '') {
        this.$message('昵称不能为空')
      } else if (data.userPhone === '' || data.userPhone.length > 11 || data.userPhone.length < 11) {
        this.$message('手机号不能为空')
      } else if (data.userPassword === '') {
        this.$message('密码不能为空')
      } else if (data.userPassword !== this.ConfirmPassword) {
        this.$message('两次密码不一致')
      } else if (data.code === '') {
        this.$message('输入手机验证码')
      } else if (data.loginName === '') {
        this.$message('昵称不能为空')
      } else {
        this.$axios.post('/clientuser/register', data).then(res => {
          if (res.data.flag) {
            this.$message({
              message: '注册成功',
              type: 'success'
            })
            this.TCzhuce = false
            this.showM = 'denglu'
            this.loginForm = {
              userPhone: '',
              userPassword: '',
              code: '',
              seccode: ''// 用户输入验证码数据
            }
            this.isShow = false
          } else {
            this.$message({
              message: res.data.code,
              type: 'error'
            })
          }
        })
      }
    },

    // 监控输入手机号
    isPhone () {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (this.loginForm.userPhone.length === 11) {
        if (!reg.test(this.loginForm.userPhone)) {
          this.phoneMessage = '输入手机号有误'
          this.isShow = true
        } else {
          console.log('电话号码输入正确！')
          // this.disabled = false
          this.$axios.get('clientuser/queryByPhone', {
            params: {
              userPhone: this.loginForm.userPhone
            }
          }).then(res => {
            if (res.data.flag) {
              // sessionStorage.setItem('token', 'aaaaa12qweqwe')
              console.log(res.data.obj)
            } else {
              this.phoneMessage = res.data.code
              // this.isShow = true
            }
          })
        }
      } else {
        // this.disabled = true
        this.isShow = false
      }
    },
    //  改变手机号提示消息
    changeMsg () {
      this.disabled = true
      this.message = this.time + 's后获取'
      var timer = setInterval(() => {
        this.time--
        this.time = this.time >= 0 ? this.time : 0
        this.message = this.time + 's后获取'
        if (this.time === 0) {
          this.message = '重新获取'
          this.disabled = false
          clearInterval(timer)
          this.time = 5
        }
      }, 1000)
      this.$axios.get('/clientuser/sendloginByPhone', {
        params: {
          phone: this.loginForm.userPhone
        }
      }).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '发送成功',
            type: 'success'
          })
        }
      })
    },
    // 登录
    login (data) {
      if (this.loginForm.userPhone === '' || this.loginForm.userPhone.length > 11 || this.loginForm.userPhone.length < 11) {
        this.$message('手机号输入不正确')
      } else if (this.loginForm.userPassword === '') {
        this.$message('密码不能为空')
      } else if (this.loginForm.seccode === '') {
        this.$message('验证码不正确')
      } else {
        this.$axios.post('/clientuser/userlogin', this.loginForm).then(res => {
          if (res.data.flag) {
            const token = res.data.obj
            sessionStorage.setItem('token', token)
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push('/')
            this.loginForm = { userPhone: '' }
            // 判断复选框是否被勾选 勾选则调用配置cookie方法
          } else {
            this.$message({
              message: res.data.code,
              type: 'warning'
            })
          }
        })
      }
      // this.showZhuCeWanShan = false  //注册
      // this.active = 2   注册第二步
    },
    // eslint-disable-next-line vue/no-dupe-keys
    codelogin (data) {
      if (data.userEmail === '') {
        this.$message('邮箱不能为空')
      } else if (data.code === '') {
        this.$message('未输入验证码')
      } else if (data.seccode !== this.checkCode && data.seccode === '') {
        this.$message('输入验证码不一致')
      } else {
        this.$axios.post('/clientuser/loginByMail', data).then(res => {
          if (res.data.flag) {
            const token = res.data.obj
            sessionStorage.setItem('token', token)
            console.log(token)
            this.$message({
              message: '登陆成功',
              type: 'success'
            })

            this.$router.push('/')
            this.zhuceData = {}
          } else {
            this.$message({
              message: res.data.code,
              type: 'warning'
            })
          }
        })
      }
    },
    // 忘记密码
    ClickforgetPWD (data) {
      this.showM = 'forgetPWD'
    },
    // 注册
    ClickZhuCe (data) {
      this.showM = data
    },
    // 返回登录页面
    ClickdengluP (data) {
      this.showM = data
    },
    backPassWord (Date) {
      if (Date.userPassword !== this.ConfirmPassword) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'warning'
        })
      } else {
        this.$axios.post('/clientuser/backPassword', Date).then(res => {
          if (res.data.flag) {
            this.$message({
              message: res.data.obj,
              type: 'success'
            })
            this.WangJiPassWord = false
          } else {
            this.$message({
              message: res.data.code,
              type: 'error'
            })
          }
        })
      }
    },
    // 发送验证码
    sendMail (type, userEmail) { // 1 登录  //2是注册
      if (userEmail != null) {
        this.disabled = true
        this.message = this.time + 's后获取'
        var timer = setInterval(() => {
          this.time--
          this.time = this.time >= 0 ? this.time : 0
          this.message = this.time + 's后获取'
          if (this.time === 0) {
            this.message = '重新获取'
            this.disabled = false
            clearInterval(timer)
            this.time = 5
          }
        }, 1000)
        this.$axios.get('clientuser/sendQQMail', {
          params: {
            userEmail: userEmail,
            type: type
          }
        }).then(res => {
          if (res.data.flag) {
            this.$message({
              message: res.data.obj,
              type: 'success'
            })
            this.loading = false
          } else {
            this.$message({
              message: res.data.code,
              type: 'error'
            })
          }
        })
        this.disabled = false
      } else {
        this.$message({
          message: '邮箱为空',
          type: 'error'
        })
      }
    }
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  /deep/.el-form-item inputbar{
    margin-bottom: 0px;
  }
  #imgVerify{
    margin-top: 4px;
    border: 1px solid black;
  }
  .Box{
    width: 100%;
    height: 100%;
    /* background: rebeccapurple; */
  }
  .Header_box{
    width: 100%;
    height: 88px;
    /* background-color: #1E90FF; */
    background-color: white;
  }
  .Header_box .Header{
    width:1200px;
    height: 88px;
    background: white;
    margin: 0 auto;
  }
  .Header_left{
    width: 88px;
    height: 88px;
    /* background: yellow; */
    display: flex;
    align-items: center;
    float: left;
  }
  .Header_left .image1{
    width:88px;
  }
  .Header_left_text{
    width: 120px;
    height: 88px;
    /* background: yellow; */
    display: flex;
    align-items: center;
    text-indent: 10px;
    float: left;
    color:#d7000f;
    font-weight: 600;
    font-size: 25px;
  }
  .Header_right{
    float: right;
    display: flex;
    align-items: center;
    font-size:16px;
    width: 80px;
    height: 88px;
    /* background: yellow; */
  }
  .Header_right .sp1{
    font-size:12px;
    color: #666;
    margin-left: 2px;
  }
  .bodybox{
    width: 100%;
    height: 600px;
    background-color: #710002;
    margin: 0 auto;
    background-image: url("../assets/aa.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: -900px -250px;
  }
  .bodycenter{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    /* background: #666; */
  }
  .leftbox{
    width: 480px;
    height: 245px;
    /* background: red; */
    float: left;
    margin: 170px 80px;
    text-align: left;
    font-weight: bold;
  }
  .leftbox span{
    color: #F1F2E5;
    text-decoration: none;
    cursor:pointer;
  }
  .leftbox span:hover{
    color: white;
  }
  .leftbox img{
    width: 480px;
  }
  .loginbox{
    width: 340px;
    height: 425px;
    background: white;
    float:right;
    position: relative;
    top: 95px;
    left: -70px;
    border-radius: 25px;
    /* transform: translateY(50%); */
  }
  .slide-up { animation: slide-up 1s ease-in-out forwards;}

@keyframes slide-up {
to {
transform: translateY(0);
}
}
  .end_box{
    width: 100%;
    height: 200px;
    /* background-color: red; */
    padding: 0.1px;
  }
  .endbox_one{
    width: 1200px;
    height: 200px;
    /* background-color: #710002; */
    margin: 0 auto;
  }
  .endp1{
    text-align: center;

    width: 1200px;
    height: 26px;
    line-height: 26px;
    /* background: rebeccapurple; */
    /* border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC; */
  }
  .endp1 a{
    color: #666;
    text-decoration: none;
    margin-left: 20px;
    font-size: 12px;
    /* border-left: 1px solid #CCCCCC; */
  }
  .Qrcode{
    width:400px;
    height: 400px;
    background: red;
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body{
    margin-top: 250px;
  }
  *{
  margin: 0;
  padding: 0;
  list-style: none;
}
.forgetPWD:hover{
  color: red;
  border-bottom: red 1px;
  cursor:pointer;
}
.checkCode{
  margin-left: 6px;
}
.checkCode:hover{
  cursor:pointer;
}
.tou{
  width: 100%;
  height: 70px;
  background: #162D46;
  /* position: fixed; */
  z-index: 1000;
}
.tou1{
  width: 1200px;
  height: 70px;
  margin: 0 auto;
  /* background: red; */
}
.tou1 img{
  width: 220px;
  height: 70px;
  float: left;
}
.tou2{
  width: 100%;
  height: 100%;
}
/deep/.inputbar{
  margin-bottom: 10px;
}
.tou2 img{
  width: 100%;
  /* height: 100%; */
}
.tou1 button{
  margin-top: 24px;
  margin-left: 30px;
  width: 125px;
  height:24px;
  font-size: 13px;
  line-height: -100px;
  float: right;
  color: black;
  text-indent: -2px;
  padding: 0;
  box-sizing: border-box;
}
.denglu{
      width: 360px;
      height: 480px;
      background: white;
      position: absolute;
      top: -80px;
      right: 220px;
      /* background-color: rgba(255, 255, 255, 0.6); */
      margin: 15% auto;
      padding: 80px 50px;
      box-sizing: border-box;
      padding: 50px;
      box-sizing: border-box;
      border-radius: 20px;
      opacity: 0.95;
      /* transform: translateY(50%); */
}
.mengui{
      width: 500px;
      height: 450px;
      position: absolute;
      top: 10px;
      left: 200px;
      margin: 15% auto;
      box-sizing: border-box;

      box-sizing: border-box;
}
/* .mengui img{
  width: 360px;
  height: 450px;
} */
.denglu p{
  font-size: 16px;
  /* margin-top: 20px; */
}
.denglu .el-form-item .inputa{
  background: #FABE00;
}
.zhuce{
      width: 500px;
      height: 660px;
      background: white;
      position: absolute;
      top: -120px;
      right: -20px;
      border-radius: 20px;
      /* background-color: rgba(255, 255, 255, 0.6); */
      margin: 15% auto;
      box-sizing: border-box;
      padding:30px 50px;
      box-sizing: border-box;
      /* opacity: 0.95; */
}
.backpassword{
      width: 500px;
      height: 470px;
      background: white;
      position: absolute;
      top: -120px;
      right: -20px;
      border-radius: 20px;
      /* background-color: rgba(255, 255, 255, 0.6); */
      margin: 15% auto;
      box-sizing: border-box;
      padding:30px 50px;
      box-sizing: border-box;
      /* opacity: 0.95; */
}
</style>
